@import '../global/variables.css';

:root,
:host {
  --ring-input-xs: calc(var(--ring-unit) * 12);
  --ring-input-s: calc(var(--ring-unit) * 12);
  --ring-input-m: calc(var(--ring-unit) * 30);
  --ring-input-l: calc(var(--ring-unit) * 50);
}

/**
 * @name Input Sizes
 */

/* XS */

:global(.ring-input-size_xs.ring-input-size_xs) {
  display: inline-block;

  width: var(--ring-input-xs);
}

:global(.ring-input-size_xs.ring-input-size_xs ~ .ring-error-bubble) {
  left: calc(var(--ring-input-xs) + 2px);
}

/* S */

:global(.ring-input-size_s.ring-input-size_s) {
  display: inline-block;

  width: var(--ring-input-s);
}

:global(.ring-input-size_s.ring-input-size_s ~ .ring-error-bubble) {
  left: calc(var(--ring-input-s) + 2px);
}

/* M */

:global(.ring-input-size_m.ring-input-size_m) {
  display: inline-block;

  width: var(--ring-input-m);
}

:global(.ring-input-size_m.ring-input-size_m ~ .ring-error-bubble) {
  left: calc(var(--ring-input-m) + 2px);
}

:global(.ring-input-size_md.ring-input-size_md) {
  display: inline-block;

  width: var(--ring-input-m);
}

:global(.ring-input-size_md.ring-input-size_md ~ .ring-error-bubble) {
  left: calc(var(--ring-input-m) + 2px);
}

/* L */

:global(.ring-input-size_l.ring-input-size_l) {
  display: inline-block;

  width: var(--ring-input-l);
}

:global(.ring-input-size_l.ring-input-size_l ~ .ring-error-bubble) {
  left: calc(var(--ring-input-l) + 2px);
}

:global(.ring-input-height_s.ring-input-height_s) {
  --ring-input-padding-block: 1px;
}

:global(.ring-input-height_m.ring-input-height_m) {
  --ring-input-padding-block: 3px;
}

:global(.ring-input-height_l.ring-input-height_l) {
  --ring-input-padding-block: 5px;
}
